import { mockData } from '@/utils/mock';
import { useState } from 'react';
import { Popover } from 'antd';
import styles from './index.less';
import { CourseItem } from '@/pages/pc/components/Course';
import { allGet } from '@/services/pc';
import { Link, useHistory, Helmet } from 'umi';
import Empty from '../../components/Empty';

const PersonDetail = (props) => {
  return (
    <div className={styles.main}>{props?.data || <Empty style={{ margin: '50px auto' }} />}</div>
  );
};

const Courses = (props) => {
  return (
    <section className={styles.section}>
      <div className={styles.header}>
        <h3 className={styles.title}>老师的课程</h3>
      </div>
      <div className={styles.body}>
        {props?.data?.data?.list?.length > 0 ? (
          props?.data?.data?.list?.map?.((item, index) => (
            <div key={item.classid} className={styles.item}>
              <CourseItem index={index} {...item} />
            </div>
          ))
        ) : (
          <Empty style={{ margin: '50px auto' }} />
        )}
      </div>
    </section>
  );
};

const Index = (props) => {
  const { data } = props.teacher || {};
  const username = data?.username || '';
  const title = `${username} - 讲师介绍 - CGJOY课堂 `;
  const keywords = `${username},${username}讲师介绍,${username}介绍`;
  const description = `${data?.resume || ''}`;
  return (
    <div className={styles.page}>
      <Helmet>
        <title>{title}</title>
        <meta name="title" content={title} />
        <meta name="keywords" content={keywords} />
        <meta name="description" content={description} />
      </Helmet>
      <div className={styles.info}>
        <div className={styles.ratio}>
          <div className={styles.content}>
            <div className={styles.avatar} style={{ backgroundImage: `url(${data?.photo})` }} />
            <span className={styles.name}>{data?.username}</span>
            <div className={styles.des}>{data?.introduction}</div>
            <Popover
              overlayClassName={styles['teacher-detail']}
              placement="right"
              trigger="hover"
              content={<PersonDetail data={data?.resume} />}
              title={() => null}
            >
              <div className={styles.ex}>
                <img
                  loading="lazy"
                  src={require('@/assets/pc/images/teachers/蜜蜂.png')}
                  className={styles.mf}
                />
                个人经历
                <img
                  loading="lazy"
                  src={require('@/assets/pc/images/teachers/个人经历arrow.png')}
                  className={styles.go}
                  alt=""
                />
              </div>
            </Popover>
            <div className={styles.nums}>
              <div className={styles.item}>学员：{data?.studentnum || '-'}</div>
              <div className={styles.item}>课程：{data?.coursenum || '-'}</div>
              <div className={styles.item}>课时：{data?.lessonnum || '-'}</div>
            </div>
          </div>
        </div>
      </div>
      <Courses data={props?.courses} />
    </div>
  );
};

Index.getInitialProps = async ({ match, history, isServer }) => {
  const { query, search } = history?.location || {};
  const courseParams: any = {
    mod: 'course',
    do: 'list',
    oride: 'classid',
    perpage: 9999,
    uid: match?.params?.id,
    version: 'pc1.0',
  };

  const [courses, teacher] = await Promise.all([
    allGet({ params: courseParams }),
    allGet({ params: { mod: 'teacher', do: 'detail', uid: match?.params?.id, version: 'pc1.0' } }),
  ]);

  return {
    initialPropsOk: true,
    teacher,
    courses,
    match,
    query,
    search,
    isServer,
  };
};

export default Index;
